<template>
  <div>
    <Select
      v-if="$store.state.superAdmin == 'true'"
      v-model="museumId"
      placeholder="请选择博物馆"
      filterable
      @on-change="change"
    >
      <template v-for="item in museumList">
        <Option :value="item.id">{{item.name}}</Option>
      </template>
    </Select>

    <Card v-if="false">
      <Spin fix size="large" v-if="spinShow1"></Spin>
      <p slot="title">整体访问数据统计分析</p>
      <a href="#" slot="extra" @click.prevent="getAccessTrends">刷新</a>
      <DatePicker
        :clearable="clearable"
        format="yyyy-MM-dd"
        type="daterange"
        placeholder="请选择起止时间"
        style="width: 400px"
        :value="time1"
        :options="options"
        @on-change="onChange1"
      ></DatePicker>
      <div id="echarts" class="echarts" :style="{'width':screenWidth-width+'px'}"></div>
      <Table max-height="300" class="table" highlight-row :columns="columns0" :data="data0"></Table>
    </Card>

    <Card style="margin:10px 0 20px 0">
      <Spin fix size="large" v-if="spinShow2"></Spin>
      <p slot="title">访问分析</p>
      <a href="#" slot="extra" @click.prevent="getVisitTrend">刷新</a>
      <div>
        <DatePicker
          :clearable="clearable"
          format="yyyy-MM-dd"
          type="daterange"
          placeholder="请选择起止时间"
          style="width: 400px"
          :value="time2"
          :options="options"
          @on-change="onChange2"
        ></DatePicker>
        <Select v-model="choose1" style="width:400px" @on-change="onChange3">
          <Option v-for="item in choose1List" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div id="echarts1" class="echarts" :style="{'width':screenWidth-width+'px'}"></div>
      <Table max-height="500" class="table" highlight-row :columns="columns1" :data="data1"></Table>
    </Card>

    <Card>
      <Spin fix size="large" v-if="spinShow3"></Spin>
      <p slot="title">访问页面详情数据</p>
      <a href="#" slot="extra" @click.prevent="getVisitPage">刷新</a>
      <div>
        <DatePicker
          :clearable="clearable"
          format="yyyy-MM-dd"
          type="daterange"
          placeholder="请选择起止时间"
          style="width: 400px"
          :value="time3"
          :options="options"
          @on-change="onChange4"
        ></DatePicker>
      </div>
      <Table max-height="500" class="table" highlight-row :columns="columns2" :data="data2"></Table>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clearable: false,
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now() - 86400000;
        },
        shortcuts: [
          {
            text: "近7天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: "近30天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: "近90天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          },
          {
            text: "近180天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              return [start, end];
            }
          },
          {
            text: "近360天",
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
              return [start, end];
            }
          }
        ]
      },
      screenWidth: document.body.clientWidth,
      width: 315,

      end: "",
      start: "",
      unit: 1,
      spinShow1: false,
      time1: [],
      data0: [],
      columns0: [
        { title: "日期", key: "date", align: "center" },
        { title: "访问人次", key: "num", align: "center" }
      ],

      spinShow2: false,
      data1: [],
      data1Echarts: [],
      columns1: [
        { title: "时间", key: "ref_date", align: "center" },
        { title: "打开次数", key: "new1", align: "center" },
        { title: "次均停留时长", key: "new2", align: "center" },
        { title: "人均停留时长", key: "new3", align: "center" },
        { title: "平均访问深度", key: "new4", align: "center" },
        { title: "访问次数", key: "new5", align: "center" },
        { title: "访问人数", key: "new6", align: "center" },
        { title: "新用户数", key: "new7", align: "center" }
      ],
      choose1List: [
        { value: "session_cnt", label: "打开次数" },
        { value: "stay_time_session", label: "次均停留时长" },
        { value: "stay_time_uv", label: "人均停留时长" },
        { value: "visit_depth", label: "平均访问深度" },
        { value: "visit_pv", label: "访问次数" },
        { value: "visit_uv", label: "访问人数" },
        { value: "visit_uv_new", label: "新用户数" }
      ],
      choose1: "session_cnt",
      time2: [],

      spinShow3: false,
      data2: [],
      columns2: [
        { title: "日期", key: "new0", align: "center", minWidth: 50 },
        { title: "页面路径", key: "page_path", align: "center", minWidth: 150 },
        { title: "进入页面次数", key: "new1", align: "center" },
        { title: "退出页面次数", key: "new2", align: "center" },
        { title: "转发次数", key: "new3", align: "center" },
        { title: "转发人数", key: "new4", align: "center" },
        { title: "次均停留时长", key: "new5", align: "center" },
        { title: "访问次数", key: "new6", align: "center" },
        { title: "访问人数", key: "new7", align: "center" }
      ],
      time3: [],

      museumId: "",
      museumList: []
    };
  },
  created() {
    this.getmuseumList();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  watch: {
    screenWidth(val) {
      let that = this;
      setTimeout(function() {
        var myChart = that.echarts.init(document.getElementById("echarts"));
        var myChart1 = that.echarts.init(document.getElementById("echarts1"));
        myChart.resize();
        myChart1.resize();
      }, 300);
    },
    "$store.state.isCollapse"(val) {
      if (val) {
        this.width = 130;
      } else {
        this.width = 315;
      }
      let that = this;
      setTimeout(function() {
        var myChart = that.echarts.init(document.getElementById("echarts"));
        var myChart1 = that.echarts.init(document.getElementById("echarts1"));
        myChart.resize();
        myChart1.resize();
      }, 300);
    }
  },
  methods: {
    getmuseumList() {
      this.spinShow2 = true;
      this.spinShow3 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", res => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 50) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 50) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.getDay();
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    change() {
      this.getVisitPage();
      this.getVisitTrend();
    },
    // 得到默认时间
    getDay() {
      this.time1 = [];
      this.time2 = [];
      this.time3 = [];
      this.time1.push(this.getTime(this.getTime4(7)));
      this.time2.push(this.getTime(this.getTime4(7)));
      this.time3.push(this.getTime(this.getTime4(7)));
      this.time1.push(this.getTime(this.getTime4(1)));
      this.time2.push(this.getTime(this.getTime4(1)));
      this.time3.push(this.getTime(this.getTime4(1)));
      // this.getAccessTrends()
      this.getVisitPage();
      this.getVisitTrend();
    },
    // 整体访问数据统计分析
    getAccessTrends() {
      this.spinShow1 = true;
      let start = "",
        end = "";
      if (this.time1[0] != "" && this.time1[1] != "") {
        start = this.time1[0];
        end = this.time1[1];
      }
      this.$http(
        "/stage/dataAnalysis/getAccessTrends",
        {
          museumId: this.museumId,
          end: end,
          start: start,
          unit: this.unit
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.data0 = res.data.data;
            this.make(res.data.data);
          } else {
            this.$Message.error(res.data.msg);
          }
          this.spinShow1 = false;
        }
      );
    },
    // 改变起止时间
    onChange1(data) {
      this.time1 = data;
      var time = this.getTime3(data[1]) - this.getTime3(data[0]);
      if (time > 100 * 86400000) {
        this.unit = 2;
      } else {
        this.unit = 1;
      }
      this.getAccessTrends();
    },
    // 补齐
    make(data) {
      if (this.unit == 1) {
        let maxDate = [],
          num = 0;
        num =
          (this.getTime3(this.time1[1]) - this.getTime3(this.time1[0])) /
          86400000;
        for (let i = 1; i < num; i++) {
          maxDate.push({
            date: this.getTime(
              new Date(this.getTime3(this.time1[0]) + 86400000 * i)
            ),
            num: 0
          });
        }
        if (this.time1[0] == this.time1[1]) {
          maxDate = [
            {
              date: this.time1[1],
              num: 0
            }
          ];
        } else {
          maxDate.unshift({
            date: this.time1[0],
            num: 0
          });
          maxDate.push({
            date: this.time1[1],
            num: 0
          });
        }
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < maxDate.length; j++) {
            if (data[i].date == maxDate[j].date) {
              maxDate[j].num = data[i].num;
            }
          }
        }
        this.draw(maxDate);
      } else {
        let maxDate = [],
          num1 = 0,
          num2 = 0,
          num3 = 0,
          num4 = 0;
        num1 = parseInt(this.time1[0].substring(0, 4));
        num2 = parseInt(this.time1[0].substring(5, 7));
        num3 = parseInt(this.time1[1].substring(0, 4));
        num4 = parseInt(this.time1[1].substring(5, 7));
        if (num3 - num1 == 0) {
          for (let i = num2; i <= num4; i++) {
            if (i < 10) {
              maxDate.push({
                date: num1 + "-0" + i,
                num: 0
              });
            } else {
              maxDate.push({
                date: num1 + "-" + i,
                num: 0
              });
            }
          }
        } else if (num3 - num1 == 1) {
          for (let i = num2; i <= 12; i++) {
            if (i < 10) {
              maxDate.push({
                date: num1 + "-0" + i,
                num: 0
              });
            } else {
              maxDate.push({
                date: num1 + "-" + i,
                num: 0
              });
            }
          }
          for (let i = 1; i <= num4; i++) {
            if (i < 10) {
              maxDate.push({
                date: num3 + "-0" + i,
                num: 0
              });
            } else {
              maxDate.push({
                date: num3 + "-" + i,
                num: 0
              });
            }
          }
        } else {
          for (let i = num2; i <= 12; i++) {
            if (i < 10) {
              maxDate.push({
                date: num1 + "-0" + i,
                num: 0
              });
            } else {
              maxDate.push({
                date: num1 + "-" + i,
                num: 0
              });
            }
          }
          for (let j = num1 + 1; j <= num3 - 1; j++) {
            for (let i = 1; i <= 12; i++) {
              if (i < 10) {
                maxDate.push({
                  date: j + "-0" + i,
                  num: 0
                });
              } else {
                maxDate.push({
                  date: j + "-" + i,
                  num: 0
                });
              }
            }
          }
          for (let i = 1; i <= num4; i++) {
            if (i < 10) {
              maxDate.push({
                date: num3 + "-0" + i,
                num: 0
              });
            } else {
              maxDate.push({
                date: num3 + "-" + i,
                num: 0
              });
            }
          }
        }
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < maxDate.length; j++) {
            if (data[i].date == maxDate[j].date) {
              maxDate[j].num = data[i].num;
            }
          }
        }
        this.draw(maxDate);
      }
    },
    // 绘制
    draw(data) {
      var xData = [],
        yData = [];
      for (let i = 0; i < data.length; i++) {
        xData.push(data[i].date);
        yData.push(data[i].num);
      }
      let dom = document.getElementById("echarts");
      let myChart = this.echarts.init(dom);
      myChart.setOption({
        color: ["#2d8cf0", "#2f4554"],
        tooltip: {
          showContent: false,
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        colors: ["blue"],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
        },
        grid: {
          x: 70,
          y: 50,
          x2: 50,
          y2: 30
        },
        calculable: true,
        xAxis: {
          type: "category",
          data: xData
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 次数"
          },
          axisPointer: {
            snap: true
          }
        },
        series: [
          {
            data: yData,
            type: "bar"
          },
          {
            data: yData,
            type: "line",
            smooth: true,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          }
        ]
      });
    },

    // 访问页面
    getVisitPage() {
      this.spinShow3 = true;
      let start = "",
        end = "";
      if (this.time3[0] != "" && this.time3[1] != "") {
        start = this.time3[0];
        end = this.time3[1];
      }
      this.$http(
        "/stage/dataAnalysis/getVisitPage",
        {
          museumId: this.museumId,
          beginDate: start,
          endDate: end
        },
        "post",
        res => {
          if (res.data.code == 200) {
            if (res.data.data == undefined) {
              this.data2 = [];
            } else {
              this.data2 = res.data.data;
            }

            for (let i = 0; i < this.data2.length; i++) {
              this.data2[i].new0 =
                this.data2[i].ref_date.substr(0, 4) +
                "-" +
                this.data2[i].ref_date.substr(4, 2) +
                "-" +
                this.data2[i].ref_date.substr(6, 2);
              this.data2[i].new1 = this.data2[i].entrypage_pv + "次";
              this.data2[i].new2 = this.data2[i].exitpage_pv + "次";
              this.data2[i].new3 = this.data2[i].page_share_pv + "次";
              this.data2[i].new4 = this.data2[i].page_share_uv + "人";
              this.data2[i].new5 =
                this.data2[i].page_staytime_pv.toFixed(2) + "s";
              this.data2[i].new6 = this.data2[i].page_visit_pv + "次";
              this.data2[i].new7 = this.data2[i].page_visit_uv + "人";
            }
          } else {
            this.$Message.error(res.data.msg);
          }
          this.spinShow3 = false;
        }
      );
    },
    onChange4(data) {
      this.time3 = data;
      this.getVisitPage();
    },

    // 访问分析
    getVisitTrend() {
      this.spinShow2 = true;
      let start = "",
        end = "";
      if (this.time2[0] != "" && this.time2[1] != "") {
        start = this.time2[0];
        end = this.time2[1];
      }
      this.$http(
        "/stage/dataAnalysis/getVisitTrend",
        {
          museumId: this.museumId,
          beginDate: start,
          endDate: end
        },
        "post",
        res => {
          if (res.data.code == 200) {
            let data = res.data.data;
            for (let i = 0; i < data.length; i++) {
              data[i].ref_date =
                data[i].ref_date == undefined
                  ? ""
                  : data[i].ref_date.substr(0, 4) +
                    "-" +
                    data[i].ref_date.substr(4, 2) +
                    "-" +
                    data[i].ref_date.substr(6, 2);
              data[i].new1 = data[i].session_cnt + "次";
              data[i].new2 = data[i].stay_time_session.toFixed(2) + "s";
              data[i].new3 = data[i].stay_time_uv.toFixed(2) + "s";
              data[i].new4 = data[i].visit_depth;
              data[i].new5 = data[i].visit_pv + "次";
              data[i].new6 = data[i].visit_uv + "人";
              data[i].new7 = data[i].visit_uv_new + "人";
            }
            this.data1 = [];
            for (let i = 0; i < data.length; i++) {
              if (data[i].ref_date != "") {
                this.data1.push(data[i]);
              }
            }
            this.draw2(this.data1);
          } else {
            this.$Message.error(res.data.msg);
          }
          this.spinShow2 = false;
        }
      );
    },
    onChange2(data) {
      this.time2 = data;
      this.getVisitTrend();
    },
    onChange3(data) {
      this.getVisitTrend();
    },
    // 绘制
    draw2(data) {
      var xData = [],
        yData = [],
        type = "";
      for (let i = 0; i < data.length; i++) {
        xData.push(data[i].ref_date);
        switch (this.choose1) {
          case "session_cnt":
            yData.push(data[i].session_cnt);
            type = "次数";
            break;
          case "stay_time_session":
            yData.push(data[i].stay_time_session);
            type = "秒";
            break;
          case "stay_time_uv":
            yData.push(data[i].stay_time_uv);
            type = "秒";
            break;
          case "visit_depth":
            yData.push(data[i].visit_depth);
            type = "";
            break;
          case "visit_pv":
            yData.push(data[i].visit_pv);
            type = "次数";
            break;
          case "visit_uv":
            yData.push(data[i].visit_uv);
            type = "人数";
            break;
          case "visit_uv_new":
            yData.push(data[i].visit_uv_new);
            type = "人数";
            break;
        }
      }
      let dom = document.getElementById("echarts1");
      let myChart = this.echarts.init(dom);
      myChart.setOption({
        color: ["#2d8cf0", "#2f4554"],
        tooltip: {
          showContent: false,
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        colors: ["blue"],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
        },
        grid: {
          x: 70,
          y: 50,
          x2: 50,
          y2: 30
        },
        calculable: true,
        xAxis: {
          type: "category",
          data: xData
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} " + type
          },
          axisPointer: {
            snap: true
          }
        },
        series: [
          {
            data: yData,
            type: "bar"
          },
          {
            data: yData,
            type: "line",
            smooth: true,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.echarts {
  height: 500px;
}
</style>